import { Dept } from "@/api/interface";
import { getDeptList } from "@/api/modules/dept";
import { AuthStore } from "@/stores/modules/auth";
import { getCurrentInstance, defineComponent, ComponentInternalInstance } from "vue";
export default defineComponent({
	props: {
		initDefault: {
			type: Boolean,
			default: false
		},
		appendChild: {
			type: Boolean,
			default: false
		},
		detail: {
			type: Object,
			default() {
				return {};
			}
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	emits: ["change"],
	setup(props, { emit, expose }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const defaultExpanded = ref<string[]>([]);
		const state = reactive<any>({
			dataList: [] as Dept.ResDeptList[],
			selected: props.detail.deptId
		});
		watch(
			() => props.detail.deptId,
			() => {
				if (!props.detail.deptId) {
					clear();
				} else {
					let arr = props.detail.deptId.split(",");
					if (arr.length > 1) {
						state.selected = arr.slice(-1)[0];
					} else {
						state.selected = props.detail.deptId;
					}
				}
			}
		);
		//处理点击清除icon
		watch(
			() => state.selected,
			() => {
				if (!state.selected) {
					props.detail.deptId = "";
					props.detail.deptName = "";
					emit("change", { id: "" });
				}
			}
		);
		onMounted(async () => {
			const authStore = AuthStore();
			if (!authStore.deptListGet.length) {
				let res = await getDeptList();
				authStore.setDeptList(res.result.records.children);
			}
			state.dataList = authStore.deptListGet;
			if (props.initDefault) {
				// props.detail.deptId = props.detail.deptId || (state.dataList.length > 0 && state.dataList[0].id);
				// state.selected = props.detail.deptId;
				change(state.dataList[0]);
			}
			if (state.dataList.length <= 5) {
				let item: Dept.ResDeptList = state.dataList[0];
				defaultExpanded.value = [item.id];
			}
		});
		// eslint-disable-next-line @typescript-eslint/no-unused-vars
		const change = (val: any, node?: any) => {
			if (props.appendChild) {
				let idList: string[] = [],
					nodeList: any[] = [];
				function appendChild(node: any) {
					if (node.children && node.children.length) {
						for (let i = 0; i < node.children.length; i++) {
							let child = node.children[i];
							appendChild(child);
						}
					}
					idList.push(node.id);
					nodeList.push({ ...node });
				}
				appendChild(val);
				props.detail.deptId = idList.join(",");
				emit("change", { id: idList.join(","), nodeList: nodeList });
			} else {
				props.detail.deptId = val.id;
				props.detail.deptName = val.deptName;
				emit("change", { id: props.detail.deptId, node: val });
			}
		};
		const treeSlt = ref();
		const clear = () => {
			treeSlt.value.setCheckedKeys([]);
			state.selected = "";
		};
		expose({
			clear
		});
		return () => {
			return (
				<>
					<div class="w-full">
						{/* todo 需要改造成树形选择：https://element-plus.gitee.io/zh-CN/component/tree-select.html */}
						<el-tree-select
							filterable
							ref={treeSlt}
							disabled={props.disabled}
							class="w-full"
							v-model={state.selected}
							placeholder={proxy?.$t("device.search_placeholder.deptName")}
							data={state.dataList}
							check-strictly
							props={{ label: "deptName" }}
							value-key="id"
							clearable
							onNodeClick={(val: any, node: any) => change(val, node)}
							default-expand-all={false}
							default-expanded-keys={defaultExpanded.value}
						/>
						{/* {status.dataList.map((item: any) => {
								return <el-option label={item.deptName || item.id} value={item.id} />;
							})} */}
					</div>
				</>
			);
		};
	}
});
